<template>
  <div style="position: relative;min-width: 10px">
    <Row v-if="!hidden">
      <Col>
        <Menu theme="dark" @on-select="goto" :active-name="activeName" :open-names="openNames">
          <Submenu :name="menu.name || ''" v-for="(menu) in menuList">
            <template slot="title">
              <Icon :type="menu.type" />
              {{menu.menuType}}
            </template>
            <MenuItem :name="item.name" v-for="item in menu.menuItems">
              {{item.title}}
            </MenuItem>
          </Submenu>
        </Menu>
      </Col>
    </Row>
    <Icon class="menu-icon" type="ios-arrow-back" v-if="!hidden" @click="() => hidden = !hidden"/>
    <Icon class="menu-icon-forward" type="ios-arrow-forward" v-if="hidden" @click="() => hidden = !hidden"/>
  </div>

</template>
<script>

export default {
  data () {
    return {
      hidden: false,
      menuList: [
        {
          menuType: '商家管理',
          type: 'ios-appstore',
          name: 'store-manager',
          menuItems: [{
            name: 'store',
            title: '商家管理列表'
          }]
        },
        {
          menuType: '订单管理',
          type: 'ios-cart',
          name: 'order-manager',
          menuItems: [{
            name: 'order',
            title: '订单列表'
          }]
        },
        {
          menuType: '任务管理',
          type: 'ios-list-box',
          name: 'task-manager',
          menuItems: [{
            name: 'task',
            title: '任务列表'
          }]
        },
        {
          menuType: '佣金管理',
          type: 'logo-usd',
          name: 'commission-manager',
          menuItems: [{
            name: 'commission',
            title: '佣金列表'
          }]
        },
        {
          menuType: '运营管理',
          type: 'ios-construct',
          name: 'operative-manager',
          menuItems: [{
            name: 'operative',
            title: '运营管理'
          }]
        }
      ]
    }
  },
  props: {
    activeName: String,
    openNames: Array
  },
  methods: {
    goto (name) {
      this.$router.push('/' + name)
    }
  },
  watch: {
    openNames () {
    }
  }
}
</script>
<style>
  .ivu-menu,.ivu-menu-item{
    font-size: 15px;
  }
  .ivu-menu-item{
    padding-left: 52px!important;
  }
  .ivu-menu-dark {
    background: #363e4f;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
    color: #82b1e3;
    background: #76787929!important;
    border-right: 5px solid #2d8cf0;
    /* box-sizing: content-box; */
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-child-item-active>.ivu-menu-submenu-title {
    color: #519ae6;
  }
  .menu-icon{
    color: #fff;
    position: absolute;
    right: 5px;
    top: 50%;
  }
  .menu-icon-forward{
    color: #fff;
    position: absolute;
    right: 0px;
    top: 50%;
  }
</style>
